<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery样式操作</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div>
        <p style="color: red;">jQuery 可以使用 css方法来修改简单元素样式；也可以操作类，修改多个样式。</p>
        <p>1、参数只写属性名，则是返回属性值。</p>
        <p>$(this).css('color'); 返回的是当前元素的文本颜色。如果属性值是数值，则可以不屑引号。</p>
        <p>2、参数是以“ '属性名','属性值' ”的形式，则是修改属性值。</p>
        <p>注：这种方式可以同时修改多个 css属性。这种写法，参数是个对象，需要使用 {}，每个属性之间使用逗号隔开。</p>
    </div>
    <script>
        //1、参数只写属性名，则是返回属性值。
        console.log($('div>p:eq(0)').css('color'));
        console.log($('div>p:eq(0)').css('width'));
        //2、参数是以“ '属性名','属性值' ”的形式，则是设置属性值。
        $('div>p:eq(0)').css('color','green');
        //3、同时修改多个属性，参数是个对象。复合属性，需要使用驼峰命名法
        $('div>p:eq(4)').css({
            'height': 30,
            'color':'red',
            'font-size':'20px',
            'backgroundColor':'yellow'
        })
    </script>
</body>
</html>